<template>  
            <ul class="content" ref="content">
              <li v-for="(item, index) in recommendedlist" :key="index">
                <div class="liii">
                  <van-image :src="item.picUrl" class="image"></van-image>
                  <div class="wzzzz">
                    <div class="wz1">
                      <span class="span1">{{ item.name }}</span>
                    </div>
                    <div class="wz2">
                      <span class="span2">{{ item.copywriter }}</span>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
</template>
<script>
export default {
  created() {
    this.getData();
  },
  data() {
   
    return {
      recommendedlist: [],
    };
    
  },
  methods: {
    hotbk() {},
    getData() {
      this.$request("get", "/personalized?limit=3").then((res) => {
        console.log(res);
        this.recommendedlist = res.result;
    
      });
    },
  },
};
</script>
<style scoped>

ul.content li {
  margin-left: 2rem;
  margin-top: 1rem;
}

.image {
  width: 20%;
  height: 20%;
}

.liii {
  display: flex;
}
.wzzzz {
  display: block;
}

.wz1 {
  margin-top: 2rem;
}
.span1 {
  font-size: 0.5rem;
  margin-left: 2rem;
}
.wz2 {
  text-align: center;
  margin-top: 5rem;
}
</style>
